<!--首页底部-->
<template>
  <div id="bottom">
    <ul>
      <router-link to="/index" tag="li">
        <div class="index">
          <img src="../assets/train/home.png" v-if="active ==='index'">
          <img src="../assets/train/home1.png" v-else>
        </div>
        <span>首页</span>
      </router-link>

      <router-link to="/order" tag="li">
        <div class="order">
          <img src="../assets/train/learn.png" v-if="active ==='order'">
          <img src="../assets/train/learn1.png" v-else>
        </div>
        <span>学习资料</span>
      </router-link>

      <router-link to="/home" tag="li">
        <div class="home">
          <img src="../assets/train/me.png" v-if="active ==='home'">
          <img src="../assets/train/me1.png" v-else>
        </div>
        <span>我的</span>
      </router-link>

    </ul>
  </div>
</template>


<script>
export default {
  data() {
    return {
      active: "index"
    };
  },
  mounted() {
    this.active = this.$route.path.slice(1);
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../style/mixin.scss";
#bottom {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 1rem;
  // box-sizing: border-box;
  z-index: 999; //保证底部在商家列表上层 当点击综合排序时  不会被遮罩挡住

  ul {
    display: flex;
    height: 1rem;
    background: rgb(250, 250, 250);
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      line-height: .75;
      padding-top: 10px;
      img{
        width: .5rem;
        height: .5rem;
      }
    }
    span {
      font-size: 0.3rem;
    }
  }
}
</style>